<template>
	<view class="zone">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header title="实物夺宝" color="#fff"></Header>
		<view class="button posabtn" @click="$p.navto('/pages/index/exchange')">实物兑换</view>
		<!-- /滚动通知 -->
		<view class="tongzhi">
			<view class="noticebar">
				<view class="notice-content">
					<image class="dang" src="http://img.cpgm.cc/panda/static/duoBao/laba.png" mode="widthFix" />
					<view class="notice" v-for="(item , index) in noticeList" :key="index"
						:style="{transform: 'translateY(' + translateY + 'px)'}">
						<image class="logo"
							:src="item.wx_img?item.wx_img :'http://img.cpgm.cc/panda/static/login/logo.png'"
							mode="widthFix" />
						<p>
							<span class="name">{{item.wx_nickname?item.wx_nickname:'潮玩新人'}}</span>获得了：<span class="thing">{{item.name}}</span>
						</p>
					</view>
				</view>
			</view>
		</view>
		<!-- /body -->
		<view class="body">
			<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" style="height: 100%" scroll-y="true">
				<!-- /上面 -->
				<view class="top_tab">
					<view @click="huojiang" class="left">
						<image src="http://img.cpgm.cc/panda/static/duoBao/duobaoding.png" class="img" mode="widthFix"></image>
						<view class="txt">
							获奖名单
						</view>
					</view>
					<view @click="gonglue" class="left">
						<image src="http://img.cpgm.cc/panda/static/duoBao/gongl.png" class="img" mode="widthFix"></image>
						<view class="txt">
							玩法攻略
						</view>
					</view>
					<view @click="guize" class="left">
						<image src="http://img.cpgm.cc/panda/static/duoBao/asfh.png" class="img" mode="widthFix"></image>
						<view class="txt">
							夺宝规则
						</view>
					</view>
					<view @click="order" class="left">
						<image src="http://img.cpgm.cc/panda/static/duoBao/asfjj.png" class="img" mode="widthFix"></image>
						<view class="txt">
							夺宝订单
						</view>
					</view>
				</view>
				<!-- 下面的列表 -->
				<view class="list_son" v-for="(item,index) in list" :key="index">
					<view class="left_img">
						<image :src="item.img? imgurl + item.img :'http://img.cpgm.cc/panda/static/login/logo.png'"
							class="shiwu_img" mode="widthFix"></image>
						<view class="jieshao">
							<view class="title">
								{{item.name}}
							</view>
							<view class="shuNum">
								需要水晶：<text> {{item.nums}}</text>
							</view>
						</view>
					</view>
					<view class="right_btn">
						<view class="jindu">
							<view class="tit">
								夺宝进度：{{countpro(item.nums,item.use)}}%
							</view>
							<view class="tiao">
								<!-- -->
								<u-line-progress height="12" :show-percent="false"
									:percent="countpro(item.nums,item.use) "></u-line-progress>
							</view>
						</view>
						<view @click="duihuan(item)" class="btn button">
							夺宝
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出层 -->
		<u-popup mode="bottom" border-radius="56" v-model="show">
			<view class="waiBox">
				<view class="top_ti">
					<view class="duoDetl">
						夺宝详情
					</view>
					<view class="qiNum">
						{{shoopObj.remark}}
					</view>
					<image @click="cha" src="http://img.cpgm.cc/panda/static/duoBao/cha2.png" class="chah" mode=""></image>
				</view>
				<!-- /下面的物品 -->
				<view class="wupin">
					<view class="wupin_img">

						<image class=" img"
							:src="duoDetil.img? imgurl + duoDetil.img :'http://img.cpgm.cc/panda/static/login/logo.png'"
							mode="
							widthFix">
						</image>
					</view>
					<view class="jindu">
						<view class="titNum">
							{{duoDetil.name}}
						</view>
						<view class="jidu">
							<u-line-progress :show-percent="false" :percent="num"></u-line-progress>
						</view>
						<view class="renci">
							<view class="">
								总需要人次：<text>{{duoDetil.nums}}</text>
							</view>
							<view class="">
								剩余人次：<text>{{shoopObj.nums}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 下面的主题 -->
				<view class="body_zhu">
					<view class="top_my">
						我的参与人数
					</view>
					<!-- 步进器 -->
					<view class="bujin">
						<view @click="jian(1)" style="display: none;" class="bu_right button">
							-50
						</view>
						<view class="bu_cen">
							<u-number-box :max="max" :min="1" v-model="value"></u-number-box>
						</view>
						<view style="display: none;" @click="jian(2)" class="bu_right button">
							+50
						</view>
					</view>
					<view class="top_my">
						推荐人次
					</view>
					<!-- 下方的推荐人次 -->
					<view class="tuijian">
						<view @click="qieClick(1)" class="button cent_mar" :class="[qie==1?'cnter2':'cnter']">
							<view class="top_txt ">
								<text>{{chooselist[0].num}}</text>人次
							</view>
							<view class="bot_txt">
								概率{{chooselist[0].odds}}
							</view>
						</view>
						<view @click="qieClick(2)" class="button cent_mar" :class="[qie==2?'cnter2':'cnter']">
							<view class="top_txt">
								<text>{{chooselist[1].num}}</text>人次
							</view>
							<view class="bot_txt">
								概率{{chooselist[1].odds}}
							</view>
						</view>
						<view @click="qieClick(3)" class="button cent_mar" :class="[qie==3?'cnter2':'cnter']">
							<view class="top_txt">
								<text>{{chooselist[2].num}}</text>人次
							</view>
							<view class="bot_txt">
								概率{{chooselist[2].odds}}
							</view>
						</view>
						<view @click="qieClick(4)" class="button" :class="[qie==4?'cnter2':'cnter']">
							<view class="top_txt">
								<!-- <text>{{chooselist[3].num}}</text>人次 -->
								<text>剩余全部人次</text>
							</view>
							<view class="bot_txt">
								概率{{chooselist[3].odds}}
							</view>
						</view>
					</view>
					<!-- 下面的按钮 -->
					<u-button :plain="true" :hair-line="false" class="btn_bao button" hover-class="none"
						:throttle-time="1000" @click="rewardenroll()">
						<!-- <image class="img" src="http://img.cpgm.cc/panda/static/index/1.png" mode="widthFix"></image> -->
						<!-- <text>x{{value}}</text> -->
						<text>立即参与</text>
					</u-button>
				</view>
			</view>
		</u-popup>

		<u-popup mode="center" border-radius="30" v-model="show2" length="90%">
			<view class="tanchu">
					<h3>夺宝规则</h3>
				<!-- 下方的规则 -->
				<view class="guize">
					<view class="one">
						<text class="txt">1.每个夺宝场内可花费1人次所需的水晶及倍数参与夺宝活动。</text>
						<text class="txt">2.每参与人次对应一个夺宝号码，中奖号码在每期的夺宝号码中产出。</text>
						<text class="txt">3.中奖号码由计算机随机数产出。</text>
						<text>4.夺宝中奖后奖励会自动发放。</text>
					</view>
					<!-- 按钮 -->
					<view @click="cha2" class="btn_que">
						我知道了
					</view>
				</view>
			</view>
		</u-popup>


		<!-- 夺宝攻略 -->
		<u-popup mode="bottom" border-radius="56" v-model="show3">
			<view class="waiBox">
				<view class="top_ti">
					<view class="duoDetl">
						夺宝攻略
					</view>
					<image src="http://img.cpgm.cc/panda/static/duoBao/cha2.png" @click="cha3" class="chah" mode=""></image>
				</view>
				<!-- /下方的说明 -->
				<view class="body_gong">
					<image class="jie" src="http://img.cpgm.cc/panda/static/duoBao/jieshao.png" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
	</view>


</template>

<script>
	import config from '@/common/config/index'
	export default {
		data() {
			return {
				max: 0,
				noticeList: [],
				translateY: 0, // 竖直方向的偏移量
				headerimgurl: config.headerimgurl,
				imgurl: config.imgurl,
				qie: 0,
				value: 1,
				show2: false,
				show: false,
				show3: false,
				status: 0,
				id: 0,
				list: [],
				intervalId: null, // 定时器ID
				duoDetil: {
					img: '',
					name: '',
					nums: 0
				},
				items: {},
				shoopObj: {},
				num: 0,
				chooselist: [{
						num: '',
						odds: ''
					},
					{
						num: '',
						odds: ''
					},
					{
						num: '',
						odds: ''
					},
					{
						num: '',
						odds: ''
					},
				],
			}
		},
		onShow() {
			// /调用方法请求初始数据
			this.initList()
			// 获取公告
			this.rewardLogs();
		},
		mounted() {
			this.startScroll();
		},
		methods: {
			// 点击投入
			async rewardenroll() {
				let n = await this.$http.index.rewardenroll({
					num: this.value,
					id: this.id,
					type: this.qie == 0 ? 1 : this.qie
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					this.initList()
					this.duihuan()
					this.show = false
				}
				// console.log(n.data);
			},

			// 中奖
			async rewardtoReward(item) {
				let res = await this.$http.index.rewardtoReward({
					id: item.id
				})
				this.getInfos(item); //获取夺宝期数和剩余数量
			},

			async getInfos(item) {
				// 请求详情
				let res = await this.$http.index.getInfos({
					id: item.id
				})
				this.shoopObj = res.data
				// 百分比
				this.num = ((item.nums - res.data.nums) / item.nums) * 100
				// /第四个
				this.max = res.data.nums
				this.chooselist[3].num = res.data.nums
				this.chooselist[3].odds = ((res.data.nums / item.nums) * 100).toFixed(2) + '%'
				this.id = item.id
			},

			// 点击夺宝
			async duihuan(item) {
				try {
					this.items = item
					this.qie = 1
					// 渲染次数
					this.chooselist[0].num = item.recommend1
					this.chooselist[0].odds = ((item.recommend1 / item.nums) * 100).toFixed(2) + '%'
					// /第二个
					this.chooselist[1].num = item.recommend2
					this.chooselist[1].odds = ((item.recommend2 / item.nums) * 100).toFixed(2) + '%'
					// 第三个
					this.chooselist[2].num = item.recommend3
					this.chooselist[2].odds = ((item.recommend3 / item.nums) * 100).toFixed(2) + '%'
					this.value = 1
					this.show = true
					this.duoDetil.name = item.name
					this.duoDetil.img = item.img
					this.duoDetil.nums = item.nums
					this.rewardtoReward(item)

				} catch (e) {
					//TODO handle the exception
				}

			},
			scrolltolower() {},
			// 点击-或+
			jian(num) {
				if (num == 1) {
					// 
					if (this.value <= 0) return
					this.value = this.value - 50
				} else if (num == 2) {
					if (this.value >= this.max) return
					if (this.value + 50 > this.max) {
						return
					}
					// 加
					this.value = this.value + 50
				}
			},
			// 点击切换
			qieClick(num) {
				if (num == 1) {
					if (this.shoopObj.nums < this.chooselist[0].num) {
						return
					}
					this.qie = num
					this.value = this.chooselist[0].num
				} else if (num == 2) {
					if (this.shoopObj.nums < this.chooselist[1].num) {
						return
					}
					this.qie = num
					this.value = this.chooselist[1].num
				} else if (num == 3) {
					if (this.shoopObj.nums < this.chooselist[2].num) {
						return
					}
					this.qie = num
					this.value = this.chooselist[2].num
				} else if (num == 4) {
					if (this.shoopObj.nums < this.chooselist[3].num) {
						return
					}
					this.rewardtoReward(this.items)
					this.qie = num
					this.value = this.chooselist[3].num
				}
			},
			// 点击差号
			cha() {
				this.show = false
			},
			// 点击叉
			cha2() {
				this.show2 = false
			},
			cha3() {
				this.show3 = false
			},
			// 点击规则打开规则
			guize() {
				this.show2 = true
			},
			// 点击获奖名单
			huojiang() {
				this.$p.navto('/pages/duoBao/awardList')
			},
			// 点击订单跳转订单
			order() {
				this.$p.navto('/pages/duoBao/oederGoods')
			},
			// 点击玩法攻略
			gonglue() {
				this.show3 = true
			},
			// 初始化数据
			async initList() {
				let n = await this.$http.index.rewardList()
				this.list = n.data
			},
			// 中奖名单
			async rewardLogs() {
				let res = await this.$http.index.rewardLogs({
					page: 1
				})
				this.noticeList = res.data
			},
			// 开始滚动
			startScroll() {
				this.intervalId = setInterval(() => {
					this.translateY -= 30 // 每次滚动30px
					if (this.translateY <= -30 * this.noticeList.length) {
						this.translateY = 0 // 滚动到最后一个通知后，回到第一个通知
					}
				}, 2000) // 每2秒滚动一次
			},

			// 计算进度
			countpro(nums, use) {
				let porss = ((use / nums) * 100).toFixed(2)
				if (porss == 100) {
					return 0
				} else {
					return Number(porss)
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	}

	.notice {
		background: #fff;
		border-radius: 15px;
		padding-left: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;

		.logo {
			width: 20px;
			margin-right: 5px;
			border-radius: 5px;
		}

		p {
			width: fit-content;
			font-size: 12px;
			color: #000;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;

			/*文本超出三点代替*/
			span {
				color: #FEEF99;
			}

			.name {
				color: #9D3A23;
				font-size: 12px;
			}

			.thing {
				color: #26FFBD;
				font-size: 12px;
			}
		}
	}

	.body_gong {
		width: 100%;
		background-color: #fff;
		padding: 10px;
		border-radius: 9px;
		margin: 0 auto;

		.jie {
			width: 100%;
		}
	}

	.cha {
		width: 25px;
		height: 25px;
		margin-top: 20px;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	/deep/.u-mode-center-box {
		background-color: transparent;
	}

	.tanchu {
		position: relative;
		padding: 20px 5px;
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		box-shadow: 0px 2 4px 0px rgba(0,0,0,0.1);
		border-radius: 18px;
		border-radius: 15px;

		h3 {
			color: #000000;
			font-size: 20px;
			text-align: center;
		}

		.guize {
			width: 90%;
			margin: 0 auto;
			border-radius: 9px;
			margin-top: 20px;

			.btn_que {
				width: 80%;
				margin: 0 auto;
				margin-top: 20px;
				font-size: 14px;
				font-weight: bold;
				color: #B73800;
				height: 60px;
				line-height: 60px;
				text-align: center;
				background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
				background-size: 100% 100%;
				border-radius: 5px;
			}

			.one {
				font-size: 12px;
				font-weight: 600;
				color: #696969;

				.txt {
					display: block;
					margin: 3px 0;
				}
			}
		}

		.nei {
			font-size: 12px;
			font-weight: 500;
			color: #343434;
			margin-top: 24px;
			text-align: center;
		}

		.you {
			font-size: 12px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FF456C;
			text-align: center;
			margin-top: 10px;
		}

		.fuzhi {
			width: 167px;
			height: 39px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 20px;
			font-size: 13px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 39px;
			margin: 0 auto;
			margin-top: 10px;
		}
	}

	.center_prop {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px 0;

		.text {
			font-size: 16px;
			font-weight: bold;
			color: #131314;
			margin: 0 16px;
		}

		.xing {
			width: 12px;
			height: 12px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}

	.waiBox {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		box-shadow: 0px 2 4px 0px rgba(0,0,0,0.1);
		border-radius: 18px 18px 0px 0px;
		padding: 20px ;

		.body_zhu {
			width: 100%;
			padding: 10px;
			border-radius: 6px;

			.btn_bao {
				width: 100%;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
				background-size: 100% 100%;
				border-radius: 5px;
				margin-top: 50px;

				text {
					font-size: 16px;
					font-weight: bold;
					color: #B73800;
				}

				.img {
					width: 27px;
					height: 24px;
					font-size: 16px;
					font-weight: bold;
					color: #000000;
				}
			}

			.tuijian {
				width: 100%;
				height: 50px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;

				text {
					font-size: 10px;
					font-weight: bold;
					color: #000;
				}

				.cnter {
					width: 25%;
					height: 100%;
					font-size: 11px;
					zoom: 0.9;
					font-weight: 500;
					color: #000;
					background: #ffffff;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

				.cnter2 {
					width: 25%;
					height: 100%;
					font-size: 11px;
					font-weight: 500;
					color: #fff;
					zoom: 0.9;
					background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					text {
						color: #fff;
					}
				}

				.cent_mar {
					margin-right: 5px;
				}
			}

			.top_my {
				font-size: 15px;
				font-weight: 600;
				color: #131314;
			}

			.bujin {
				width: 70%;
				height: 45px;
				background-color: #eef1f5;
				border-radius: 23px;
				margin: 0 auto;
				margin-top: 25px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10px;
				margin-bottom: 10px;

				.bu_img {
					width: 23px;
					height: 23px;
				}

				.bu_right {
					width: 34px;
					height: 19px;
					background: #9D3A23;
					border-radius: 3px;
					font-size: 9px;
					zoom: 0.9;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 19px;
					text-align: center;
				}
			}

		}

		.wupin {
			width: 100%;
			height: 100px;
			background-color: #fff;
			border-radius: 6px;
			border: 1px solid #FEE1C3;
			padding: 10px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.jindu {
				flex: 3;

				.jidu {
					margin: 10px 0;
				}

				.titNum {
					font-size: 15px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 600;
					color: #131314;
				}

				.renci {
					display: flex;
					justify-content: space-between;
					font-size: 11px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #343434;

					text {
						color: #239D4C;
					}
				}
			}

			.wupin_img {
				flex: 1;
				margin-right: 10px;

				.img {
					width: 75px;
					height: 75px;
					background: linear-gradient(180deg, rgba(4, 119, 253, 0.21) 0%, rgba(122, 253, 207, 0.21) 100%);
					border-radius: 7px;
				}
			}

		}

		.top_ti {
			text-align: center;
			position: relative;
			height: 50px;
			width: 100%;

			.chah {
				position: absolute;
				width: 25px;
				height: 25px;
				top: 0px;
				right: 0px;
			}

			.duoDetl {
				font-size: 20px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #343434;
			}

			.qiNum {
				font-size: 11px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #343434;
			}
		}
	}

	.tongzhi {
		height: 26px;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
		box-sizing: border-box;

		.noticebar {
			height: 30px;
			flex: 1;
			background: rgba(181, 208, 247, 0.19);
			border-radius: 5px;
			// margin-right: 10px;
			position: relative;
			text-align: center;
			overflow: hidden;
		}

		.dang {
			width: 15px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 5%;
			z-index: 99;
			filter: invert(1);
		}

		.box {
			background: #F7D7C4;
			box-shadow: inset 1px 1px 0px 0px rgba(212, 180, 148, 1), inset -1px -1px 0px 0px rgba(255, 244, 232, 1);
			border-radius: 9px;
			padding: 10px;
			margin-top: 10px;
		}



		.header {
			position: relative;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10px;

			image {
				width: 55px;
				height: 55px;
			}
		}

	}

	/deep/.u-active {
		background: linear-gradient(243deg, #0477FD 0%, #7AFDCF 100%);
		border-radius: 8px;
	}

	/deep/ .u-icon-plus {
		width: 45px;
		height: 45px !important;
		border-radius: 50%;
		margin: 0 50px;
		background-color: #ffffff !important;
		// border: 2px solid #E6BD97;
	}

	/deep/.u-icon-disabled {
		margin: 0 50px;
		width: 45px;
		height: 45px !important;
		border-radius: 50%;
		background-color: #ffffff !important;
		// border: 2px solid #E6BD97;
	}

	/deep/.u-icon-minus {
		margin: 0 50px;
		width: 45px;
		height: 45px !important;
		border-radius: 50%;
		background-color: #ffffff !important;
		// border: 2px solid #E6BD97;
	}

	/deep/.u-iconfont {
		font-size: 18px !important;
		font-weight: 600 !important;
		color: #000;
	}

	/deep/.uicon-arrow-left::before {
		font-size: 20px !important;
		font-weight: 500 !important;
	}

	/deep/.uni-input-input {
		font-size: 18px;
		font-weight: 600;
	}

	// /deep/.u-iconfont {
	// 	font-size: 20rpx !important;
	// }

	/deep/.u-number-input {
		background-color: transparent !important;
	}

	/deep/.u-drawer-content-visible {
		max-width: 480px;
		margin: 0 auto;
	}

	.body {
		height: calc(100vh - 86px);
		width: 100%;
		padding: 15px 15px;

		.list_son {
			width: 100%;
			height: 75px;
			border-radius: 10px;
			margin-bottom: 10px;
			background: rgba(255,255,255,0.9);
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right_btn {
				display: flex;
				flex: 0.5;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.jindu {
					.tit {
						font-size: 12px;
						font-weight: 600;
						text-align: center;
						margin-bottom: -5px;
						color: #131314;
						zoom: 0.8;
					}

					.tiao {
						// width: 90px;
					}
				}

				.btn {
					width: 66px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
					background-size: 100% 100%;
					border-radius: 5px;
					font-size: 12px;
					font-weight: bold;
					color: #B73800;
				}
			}

			.left_img {
				display: flex;
				align-items: center;

				.shiwu_img {
					width: 57px;
					height: 57px;
					margin-right: 10px;
					background: linear-gradient(180deg, rgba(4, 119, 253, 0.21) 0%, rgba(122, 253, 207, 0.21) 100%);
					border-radius: 7px;
				}

				.jieshao {
					.title {
						font-size: 15px;
						font-weight: 600;
						color: #131314
					}

					.shuNum {
						padding: 3px 10px;
						background-color: #fbede9;
						border-radius: 15px;
						margin-top: 5px;
						font-size: 11px;
						font-weight: 500;
						color: #343434;

						text {
							color: #ff0000;
						}
					}
				}
			}
		}

		.top_tab {
			width: 100%;
			height: 75px;
			background: rgba(255,255,255,0.8);
			border-radius: 10px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 10px;

			.left {
				display: flex;
				align-items: center;
				flex-direction: column;
				flex: 1;
				border-right: 1px solid #e3dede;

				&:nth-child(4) {
					border: none;
				}

				.img {
					width: 26px;
					height: 26px;
					// margin-bottom: 10px;
				}

				.txt {
					font-size: 12px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #343434;
				}
			}

		}
	}

	/deep/ .u-notice-bar {
		height: 26px;
		border-radius: 13px;
		margin: 0 auto;
		width: 85% !important;
	}

	/deep/.u-swiper-item {
		justify-content: center;
	}

	/deep/ .u-news-item {
		font-size: 12px !important;
		color: #000 !important;
	}

	.mian {
		height: 100vh;
		background: url('http://img.cpgm.cc/panda/static/home/bg3.jpg') no-repeat;
		background-size: 100% 100%;
		width: 100%;
	}

	.posabtn {
		position: absolute;
		top: 12px;
		right: 15px;
		width: 80px;
		height: 38px;
		background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
		background-size: 100% 100%;
		color: #9D3A23;
		font-size: 14px;
		font-weight: 600;
		z-index: 998;
	}
</style>